<template>
	<view class="container">
		<view class="swiper-container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item, index) in swiperImages" :key="item">
					<image class="swiper-image" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="content">
			<view class="header">套餐类型</view>
			<view class="package-options">
				<view 
					v-for="(option, index) in packages" 
					:key="index" 
					class="package-option"
					:class="{ selected: selectedPackage === index }"
					@click="selectPackage(index)"
				>
					<text class="package-name">{{ option.planTitle }}</text>
					<text class="package-price">{{ option.planPrice }}</text>
					<view v-if="selectedPackage === index" class="selected-mark">
						<uni-icons type="checkmarkempty" size="16" color="#FFFFFF"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="fee-explanation">
				<view class="fee-title">费用说明</view>
				<text class="fee-text">押金500元，免押金需芝麻分550分以上，超时每分钟2元，超时费用每日最高500元，60秒内免费归还</text>
			</view>
			
			<button class="rent-button" @click="() => handleRent()">开始租借</button>
		</view>
	</view>
</template>

<script>
	import { getMealList } from '@/api/meal.js'
	import { USER_INFO } from '@/const/storage.js'

	export default {
		data() {
			return {
				selectedPackage: 0,
				swiperImages: [
					'https://manage.sungmu.net/upload/images/20241021/dd1db2c11513b8262a287b0774614b5749193.jpg',
					'https://manage.sungmu.net/upload/images/20241021/dd1db2c11513b8262a287b0774614b5749193.jpg',
					'https://manage.sungmu.net/upload/images/20241021/dd1db2c11513b8262a287b0774614b5749193.jpg'
				],
				packages: [],
				userInfo: uni.getStorageSync(USER_INFO)
			}
		},
		onLoad(options) {
			console.log(options);
			this.getMeals()
		},
		onShow() {
			if (!uni.getStorageSync(USER_INFO)?.token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
			}
		},
		methods: {
			selectPackage(index) {
				this.selectedPackage = index;
			},
			// 获取套餐列表
			async getMeals() {
				console.log(this.userInfo.token);
				if (!this.userInfo.token) return
				const res = await getMealList()
				this.packages = res.data
				console.log(res.data)
			},
			handleRent() {
				if (!this.packages.length) {
					return uni.showModal({
						title: '温馨提示',
						content: '暂无可租借套餐',
						showCancel: false,
					})
				}
				const uuid = this.packages[this.selectedPackage].uuid
				uni.navigateTo({
					url:'/pages/index/guide/guide?uuid=' + uuid
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background: white;
		min-height: 100vh;
		padding: 0;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}
	
	.swiper-container {
		width: 100%;
		height: 380rpx;
		position: relative;
		overflow: hidden;
	}
	
	.swiper {
		height: 100%;
	}
	
	.swiper-image {
		width: 100%;
		height: 100%;
	}
	
	.content {
		padding: 30rpx;
		margin-top: -60rpx;
		position: relative;
		z-index: 1;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	}
	
	.header {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
		position: relative;
		padding-left: 20rpx;
		color: #333333;
	}
	
	.header::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 36rpx;
		background-color: #007AFF;
		border-radius: 4rpx;
	}
	
	.package-options {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
	
	.package-option {
		flex: 0 0 48%;
		max-width: 48%;
		padding: 30rpx 20rpx;
		border: 2rpx solid #EBEBF5;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		text-align: center;
		box-sizing: border-box;
		position: relative;
		transition: all 0.2s ease;
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.package-option.selected {
		border-color: #68afaa;
		background-color: #F0F7FF;
		box-shadow: 0 4rpx 16rpx rgba(104, 175, 170, 0.2);
	}
	
	.package-name {
		display: block;
		font-size: 28rpx;
		margin-bottom: 8rpx;
		font-weight: 500;
		color: #333333;
	}
	
	.package-price {
		font-size: 32rpx;
		font-weight: 600;
		color: #FC2728;
	}
	
	.selected-mark {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 36rpx;
		height: 36rpx;
		background-color: #68afaa;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.fee-explanation {
		margin-bottom: 40rpx;
		padding: 25rpx;
		background-color: #F9F9F9;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 1.6;
		border: 1rpx solid #F0F0F0;
	}
	
	.fee-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #007AFF;
		margin-bottom: 15rpx;
	}
	
	.rent-button {
		width: 100%;
		padding: 12rpx 0;
		background: linear-gradient(180deg, #99D0CD 0%, #7ab3af 100%);
		color: #FFFFFF;
		border: none;
		border-radius: 40rpx;
		font-size: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(104, 175, 170, 0.3);
		transition: all 0.3s ease;
		margin-top: 66rpx;
	}
	
	.rent-button:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 6rpx rgba(104, 175, 170, 0.3);
		opacity: 0.9;
	}
</style>